<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
  <title>出货单打印</title>
</head>
<body>
  <div id="print" class="print">
    <h3 style="margin: 0;font-weight:normal;">益谦服饰-出货单</h3>
    <div class="head-foot" style="margin-bottom: 10px">
      <span style="display:flex;white-space: nowrap;width: 300px;">接收方名称:&nbsp;&nbsp;<input v-if="edit" v-model="customer"/><span v-else>{{ customer }}</span></span>
      <span style="display:flex;white-space: nowrap;width: 300px;">操作员:&nbsp;&nbsp;<input v-if="edit" v-model="operator" /><span v-else>{{ operator }}</span></span>
    </div>
    <table>
      <tr>
        <td>款号</td>
        <td>品名</td>
        <td>颜色</td>
        <td>S</td>
        <td>M</td>
        <td>L</td>
        <td>XL</td>
        <td>2XL</td>
        <td>3XL</td>
        <td>4XL</td>
        <td>5XL</td>
        <td>6XL</td>
        <td>单价</td>
        <td>折率</td>
        <td>件数</td>
        <td>金额小计</td>
      </tr>
      <tr v-for="(e, i) in orders" :key="i">
        <td>
          <input v-if="edit" v-model.trim="e.sku" v-on:change="change(e)" />
          <span v-else>{{ e.sku }}</span>
        </td>
        <td>
          <input v-if="edit" v-model.trim="e.name" v-on:change="change(e)" />
          <span v-else>{{ e.name }}</span>
        </td>
        <td>
          <input v-if="edit" v-model.trim="e.color" v-on:change="change(e)" />
          <span v-else>{{ e.color }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.s" v-on:change="change(e)" />
          <span v-else>{{ e.s }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.m" v-on:change="change(e)" />
          <span v-else>{{ e.m }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.l" v-on:change="change(e)" />
          <span v-else>{{ e.l }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xl" v-on:change="change(e)" />
          <span v-else>{{ e.xl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xxl" v-on:change="change(e)" />
          <span v-else>{{ e.xxl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xxxl" v-on:change="change(e)" />
          <span v-else>{{ e.xxxl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xxxxl" v-on:change="change(e)" />
          <span v-else>{{ e.xxxxl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xxxxxl" v-on:change="change(e)" />
          <span v-else>{{ e.xxxxxl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.xxxxxxl" v-on:change="change(e)" />
          <span v-else>{{ e.xxxxxxl }}</span>
        </td>
        <td>
          <input v-if="edit" type="number" v-model.trim="e.salePrice" v-on:change="change(e)" />
          <span v-else>{{ e.salePrice }}</span>
        </td>
        <td></td>
        <td>{{ e.subtotal }}</td>
        <td>{{ e.subMoney }}</td>
      </tr>
    </table>
    <div style="margin-top: 10px">
      <div class="head-foot">
        <span>总件数:<span class="important">{{ total }}</span></span>
        <span>金额合计:<span class="important">{{ totalMoney }}</span></span>
      </div>
      <div class="head-foot">
        <span>地址:济南泺口服装城商贸中心2楼东区2354</span>
        <span>建设银行卡号: 6214662340297106</span>
      </div>
      <div class="head-foot">
        <span>联系方式: 15508693557</span>
        <span>打印时间:{{ printDate | parseTime }}</span>
      </div>
      <div>
        <button type="button" style="float: right;" v-on:click="print">{{ edit ? '打印':'编辑' }}</button>
      </div>
    </div>
  </div>
</body>
<script>
  let print = new Vue({
    el: '#print',
    filters: {
      parseTime(time, cFormat) {
        if (arguments.length === 0 || !time) {
          return null
        }
        const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
        let formatObj
        if (time instanceof Array) {
          formatObj = {
            y: time[0],
            m: time[1],
            d: time[2],
            h: time[3],
            i: time[4],
            s: time[5]
          }
        } else if (time instanceof Date) {
          formatObj = {
            y: time.getFullYear(),
            m: time.getMonth() + 1,
            d: time.getDate(),
            h: time.getHours(),
            i: time.getMinutes(),
            s: time.getSeconds()
          }
        }
        const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
          const value = formatObj[key]
          // Note: getDay() returns 0 on Sunday
          if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
          return value.toString().padStart(2, '0')
        })
        return time_str
      }
    },
    data: {
      orders: [],
      edit: true,
      customer: '',
      operator: '',
      total: null,
      totalMoney: null,
      printDate: null
    },
    created() {
      this.printDate = new Date();
      this.orders.push({
        sku: "",
        name: "",
        color: "",
        s: null,
        m: null,
        l: null,
        xl: null,
        xxl: null,
        xxxl: null,
        xxxxl: null,
        xxxxxl: null,
        xxxxxxl: null,
        salePrice: null,
        discount: null,
        subtotal: null,
        subMoney: null
      });
    },
    mounted() {
    },
    methods: {
      print() {
        this.edit = !this.edit
        setTimeout(() => {
          window.print()
        }, 1500);
      },
      change(item) {
        // 算小计
        item.subtotal = (item.s | 0) + (item.m | 0) + (item.l | 0) + (item.xl | 0) + (item.xxl | 0) + (item.xxxl | 0) + (item.xxxxl | 0) + (item.xxxxxl | 0) + (item.xxxxxxl | 0)
        item.subMoney = item.salePrice ? item.subtotal * item.salePrice : 0 
        // 算总计
        this.total = this.orders.reduce((a, b) => {
          a += b.subtotal
          return a
        }, 0)
        this.totalMoney = this.orders.reduce((a, b) => {
          a += b.subMoney
          return a
        }, 0)
        if (this.orders[this.orders.length - 1].sku) {
          this.orders.push({
            sku: "",
            name: "",
            color: "",
            s: null,
            m: null,
            l: null,
            xl: null,
            xxl: null,
            xxxl: null,
            xxxxl: null,
            xxxxxl: null,
            xxxxxxl: null,
            salePrice: null,
            discount: null,
            subtotal: null,
            subMoney: null
          })
        } else if (!this.orders[this.orders.length - 2].sku) {
          this.orders.splice(this.orders.length - 1, 1)
        }
      },
    }
  })
</script>
<style type="text/css">
  table {
    width: 100%;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-spacing: 0;
  }
  td {
    min-width: 50px;
    height: 35px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
  }
  .print {
    font-size: 20px;
    width: 1200px;
    text-align: center;
  }
  .head-foot {
    display: flex;
    justify-content: space-between;
  }
  input {
    width: 100%;
    border: 0px;
    min-height: 35px;
    font-size: 25px;
  }
  button {
    visibility: hidden;
    float: right;
    padding: 10px;
    font-size: 20px;
  }
  @media screen {
    input {
      border: 0;
    }
    .important {
      color: red;
    }
    button {
      visibility: visible;
    }
  } 
</style>
</html>
